<template>
  <transition name="dialog-fade">
    <div v-show="value" class="dialog-warp">
      <div class="dialog-mask" />
      <transition name="dialog-slide">
        <div v-show="value" class="dialog-container">
          <div class="dialog-header">
            <slot name="title">{{ title }}</slot>
            <span class="iconfont icon-close" @click="close" />
          </div>
          <div class="dialog-body scroll">
            <slot />
          </div>
        </div>
      </transition>
    </div>
  </transition>
</template>

<script>
export default {
  name: 'Dialog',
  model: {
    prop: 'value',
    event: 'input'
  },
  props: {
    title: {
      type: String,
      default: 'title'
    },
    value: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    close() {
      this.$emit('input', false)
      this.$emit('close', this.value)
    }
  }
}
</script>

<style scoped>
  .dialog-warp{
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 999;
    left: 0;
    top: 0;
    overflow: auto;
  }
  .dialog-mask{
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: rgba(0, 0, 0, 0.61);
  }
  .dialog-container{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    background-color: #ffffff;
    box-shadow: 0 0 3px #606266;
  }
  .dialog-header{
    line-height: 40px;
    font-size: 14px;
    padding: 0 15px;
    position: relative;
    background: linear-gradient(
        60deg
        , rgba(84,58,183,1) 0%, rgb(8, 85, 193) 100%);
    color: #f2f2f2;
  }
  .dialog-header span.icon-close{
    position: absolute;
    display: block;
    width: 20px;
    height: 20px;
    top: 10px;
    right: 10px;
    text-align: center;
    line-height: 20px;
    vertical-align: middle;
    font-size: 14px;
    color: #f2f2f2;
    cursor: pointer;
  }
  .dialog-fade-enter-active, .dialog-fade-leave-active {
    transition: all .5s;
  }
  .dialog-fade-leave-to,.dialog-fade-enter{
    opacity: 0;
  }
  .dialog-slide-enter-active, .dialog-slide-leave-active {
    transition: all .5s;
  }
  .dialog-slide-leave-to,.dialog-slide-enter{
    opacity: 0;
    margin-top: -40px;
  }
</style>
